<template>
  <div class="tw-top-bg">
    <div class="tw-container" :class="{'tw-container--non-scroll': nonScroll}">
      <tw-header
        label="嘉兴市智慧教育"></tw-header>
      <div class="tw-error">
        <div class="tw-error__layout">
          <img src="/static/weishidataview/images/404-pic.png" alt="404">
          <h4>很抱歉，页面走丢了</h4>
        </div>
      </div>
      <tw-footer
        :maxPage="maxPage"
        :hasScroll="hasScroll"></tw-footer>
    </div>
  </div>
</template>

<script scoped>
import TwHeader from '@/components/TwHeader.vue'
import TwFooter from '@/components/TwFooter.vue'
import TwCard from '@/components/TwCard.vue'

import TwEcharts from '@/components/TwEcharts.vue'

export default{
  beforeMount () {
    let windowWidth = window.screen.width
    if (windowWidth <= 1024) {
      this.nonScroll = false
    }
  },
  props: [],
  data () {
    return {
      nonScroll: true
    }
  },
  computed: {
    maxPage: function () {
      if (this.$route.path.indexOf('main') > 0) {
        return 3
      }
      if (this.$route.path.indexOf('teachingmonitoring') > 0) {
        return 2
      }
      return 0
    },
    hasScroll: function () {
      // 这里是控制footer右侧是否需要滚动，请根据路由来设置
      return this.$route.path.indexOf('main') > 0 || this.$route.path.indexOf('teachingmonitoring') > 0
    }
  },
  methods: {
    handleScrollVisible: function () {
      console.log('handleScrollVisible')
    }
  },
  components: {
    TwHeader,
    TwFooter,
    TwCard,
    TwEcharts
  }
}
</script>

<style scoped></style>
